<template>
	<basic-container>
		<!--<el-tabs v-model="tabActiveName" @tab-click="handleClick">
			<el-tab-pane label="分销设置" name="first"></el-tab-pane>
			<el-tab-pane label="分享返利设置" name="second"></el-tab-pane>
			<el-tab-pane label="升级会员设置" name="third"></el-tab-pane>
		</el-tabs>-->

		<avue-form ref="form" v-model="obj" :option="option" @reset-change="emptytChange" @submit="submit">
			<template slot="assignTypes">
				<div>
					<el-radio-group v-model="obj.assignType" >
						<el-radio :label="0">全部商品 
						</el-radio>
						<el-radio :label="1">指定商品
						</el-radio>
					</el-radio-group>
					<div>
						<el-button style="margin-left: 15px;text-decoration: underline;"  size="mini" type="text"  @click="showGoodsList()">查看商品</el-button>
						<el-button v-if="obj.assignType==1" style="margin-left: 15px;text-decoration: underline;" size="mini"  type="text" @click="getAllGoods">添加商品</el-button>
					</div>
				</div>
				
			</template>
		</avue-form>

		<!-- 指定商品 -->
		<el-drawer :wrapperClosable="false" :visible.sync="drawerAllGoods" :with-header="false" size="60%">
			<div class="demo-drawer__header">
				<div class="drawerHeader"><strong>选择商品</strong></div>
			</div>
			<div class="demo-drawer__content">
				<avue-form ref="formGoods" v-model="objAllGoods" :option="optionAllGoods">
					<template slot="goods">
						<avue-crud
							ref="goodsCrud"
							:data="goodsList"
							:option="optionGoods"
							v-model="objGoods"
							:table-loading="goodsloading"
							:page="goodsPage"
							@selection-change="selectionChange"
							@refresh-change="refreshGoodsChange"
							@search-change="searchGoodsChange"
							@search-reset="searchGoodsReset"
							@current-change="currentGoodsChange"
							@size-change="sizeGoodsChange"
							@on-load="onGoodsLoad"
						>
							<template slot="tip">
								<span style="color: #999;">&nbsp; &nbsp; </span>
							</template>
							<template slot-scope="{ row }" slot="goodsMainPhotoUrl">
								<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
							</template>
						</avue-crud>
					</template>
					<template slot="menuForm">
						<el-button type="primary" @click="handleSubmit">保存</el-button>
						<el-button @click="handleEmpty">关闭</el-button>
					</template>
				</avue-form>
			</div>
		</el-drawer>
	</basic-container>
</template>

<script>
import { getAllList, commitEdit, getDetail, getAllListGoods } from '@/api/minmao/membership/memberSetting';
import { getJoinDistributionList } from '@/api/base/goods/seller/goods';
var DIC = {
	VAILD: [
		{
			label: '全部商品',
			value: 0
		},
		{
			label: '指定商品',
			value: 1
		}
	],
	SEX: [
		{
			label: '否',
			value: 0
		},
		{
			label: '是',
			value: 1
		}
	]/*,
	MODE: [
		{
			label: '一级分销',
			value: 1
		},
		{
			label: '二级分销',
			value: 2
		},
		{
			label: '三级分销',
			value: 3
		}
	]*/
};
export default {
	data() {
		return {
			obj: {},
			tempDataObj: {},
			sizeValue: '',
			specifyGoods: [],
			loading: true,
			/*tabActiveName: 'first',*/ //tab页切换
			settingType: 3, //设置类型 1分销 2商品分享返利
			drawerAllGoods: false,
			goodsList: [], //供选择的商品
			idList: [],
			goodsQuery: {}, //输入的查询条件
			objAllGoods: {}, //选择商品绑定的对象
			goodsloading: true,
			objGoods: {},
			whichSetting: '是否开启',
			goodsPage: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},
			optionAllGoods: {
				emptyBtn: false,
				submitBtn: false,
				column: [
					{
						prop: 'goods',
						span: 24,
						formslot: true
					}
				]
			},
			//店铺商品列表
			optionGoods: {
				addBtn: false,
				header: false,
				selection: true,
				selectable: row => {
					if (row.joinDistributionStatus) {
						return false;
					} else {
						return true;
					}
				},
				menu: false,
				search: true,
				column: [
					{
						label: '商品图片',
						prop: 'goodsMainPhotoUrl',
						slot: true
						// readonly: true
					},
					{
						label: '商品名称',
						prop: 'goodsName',
						// readonly: true,
						search: true,
						searchSpan: 8
					},
					{
						label: '指定分类',
						prop: 'goodsClassId',
						hide: true,
						type: 'select',
						dicUrl: '/base/goodsClass/listManage',
						dicQuery: {
							classLevel: 2
						},
						searchSpan: 8,
						props: {
							label: 'className',
							value: 'id'
						},
						search: true
					},
					{
						label: '总库存',
						prop: 'stock',
						span: 24
					},
					{
						label: '商城售价',
						prop: 'showPrice',
						span: 24
					}
				]
			}
		};
	},
	computed: {
		option() {
			return {
				size: this.sizeValue,
				submitText: '提交',
				labelWidth: 130,
				column: [
					{
						label: this.whichSetting,
						prop: 'isOpen',
						span: 6,
						type: 'switch',
						dicData: DIC.SEX,
						hide: true,
						row: true
					},
					{
						label: '指定类型',
						prop: 'assignTypes',
						formslot: true,
						span:24,
						// span: 15,
						// type: "radio",
						// dicData: DIC.VAILD,
						// change:({value,column})=>{
						//     if(value == 1){
						//         this.getAllGoods()
						//     }
						//     console.log(value)
						// }
					},
					// {
					//     label: '请选择商品',
					//     prop: 'goodsIds',
					//     type: 'tree',
					//     multiple:true,
					//     display:false,
					//     dicData:this.specifyGoods,
					// },
					/*{
						label: '分销模式',
						prop: 'distributionLevel',
						span: 15,
						type: 'radio',
						dicData: DIC.MODE,
						change: ({ value }) => {
							console.log(value);
						}
					},*/
					/*{
						label: '一级分销比例',
						span: 16,
						prop: 'oneRatio',
						display: true,
						tip: '数值介于0-1之间,小数点后最多两位小数'
					},
					{
						label: '二级分销比例',
						span: 16,
						prop: 'twoRatio',
						display: false,
						tip: '数值介于0-1之间,小数点后最多两位小数'
					},
					{
						label: '三级分销比例',
						span: 16,
						prop: 'threeRatio',
						display: false,
						tip: '数值介于0-1之间,小数点后最多两位小数'
					},
					{
						label: '商品分享返利比例',
						span: 16,
						prop: 'shareRatio',
						display: false,
						tip: '数值介于0-1之间,小数点后最多两位小数'
					}*/
				]
			};
		}
	},

	created() {
		this.transferMethod();
	},

	watch: {
		/*'obj.distributionLevel'() {
			if (this.settingType == 1) {
				if (this.obj.distributionLevel == 1) {
					this.option.column[3].display = true;
					this.option.column[4].display = false;
					this.option.column[5].display = false;
				} else if (this.obj.distributionLevel == 2) {
					this.option.column[3].display = true;
					this.option.column[4].display = true;
					this.option.column[5].display = false;
				} else if (this.obj.distributionLevel == 3) {
					this.option.column[3].display = true;
					this.option.column[4].display = true;
					this.option.column[5].display = true;
				}
			}
		}*/
	},

	methods: {
		showGoodsList(){
			// 跳转到分销返利商品页面
			console.log(this.settingType);
			localStorage.setItem('settingType', this.settingType);
			this.$router.push({path: '/base/member/memberGoodsRelation'});
		},
		emptytChange() {
			//一点击清空按钮，这个obj里面的值全被清空了，但是我这点"提交"只是跟更新这笔数据的操作,没有id会把
			//报错的，我就索性把页面上没改的数据也赋值给它(页面初始化时，就已经存在这笔数据了，我只是将它读出来)
			this.option.column[3].display = false;
			this.option.column[4].display = false;
			this.option.column[5].display = false;
			this.obj.id = this.tempDataObj.id;
			this.obj.addTime = this.tempDataObj.addTime;
			this.obj.deleteStatus = this.tempDataObj.deleteStatus;
			this.obj.storeId = this.tempDataObj.storeId;
			this.obj.userId = this.tempDataObj.userId;
			console.log(this.obj);
		},
		submit(loading, done) {
			console.log(this.obj);
			this.loading = true;
			this.obj.settingType = this.settingType;
			this.obj.goodsIds = this.idList;
			//定义正则，用于判断是否包含小数点
			var rep = /[\.]/;
			//不管是分销设置还是返利设置，都要判断一下是否有选择"指定类型"
			if (typeof this.obj.assignType == 'string' || typeof this.obj.assignType == 'undefined') {
				this.$message({
					type: 'error',
					message: "至少选择一个'指定类型'"
				});
				done();
				return;
			}

			/*if (this.obj.settingType == 1) {
				//针对分销设置，判断是否选择了分销比例
				if (typeof this.obj.distributionLevel == 'string') {
					this.$message({
						type: 'error',
						message: "至少选择一个'分销模式'"
					});
					done();
					return;
				}

				if (this.obj.distributionLevel == 1) {
					if (rep.test(this.obj.oneRatio)) {
						if (this.obj.oneRatio > 0 && this.obj.oneRatio < 1) {
							let tempData = this.obj.oneRatio + '';
							if (tempData.length > 4) {
								this.$message({
									type: 'error',
									message: '一级分销比例介于0-1之间,小数点后最多两位小数'
								});
								done();
								return;
							}
						} else {
							this.$message({
								type: 'error',
								message: '一级分销比例介于0-1之间,小数点后最多两位小数'
							});
							done();
							return;
						}
					} else {
						this.$message({
							type: 'error',
							message: '一级分销比例介于0-1之间,小数点后最多两位小数'
						});
						done();
						return;
					}
				}

				if (this.obj.distributionLevel == 2) {
					if (rep.test(this.obj.oneRatio)) {
						if (this.obj.oneRatio > 0 && this.obj.oneRatio < 1) {
							let tempDataOne = this.obj.oneRatio + '';
							if (tempDataOne.length > 4) {
								this.$message({
									type: 'error',
									message: '一级分销比例介于0-1之间,小数点后最多两位小数'
								});
								done();
								return;
							}
						} else {
							this.$message({
								type: 'error',
								message: '一级分销比例介于0-1之间,小数点后最多两位小数'
							});
							done();
							return;
						}
					} else {
						this.$message({
							type: 'error',
							message: '一级分销比例介于0-1之间,小数点后最多两位小数'
						});
						done();
						return;
					}

					if (rep.test(this.obj.twoRatio)) {
						if (this.obj.twoRatio > 0 && this.obj.twoRatio < 1) {
							let tempDataTwo = this.obj.twoRatio + '';
							if (tempDataTwo.length > 4) {
								this.$message({
									type: 'error',
									message: '二级分销比例介于0-1之间,小数点后最多两位小数'
								});
								done();
								return;
							}
						} else {
							this.$message({
								type: 'error',
								message: '二级分销比例介于0-1之间,小数点后最多两位小数'
							});
							done();
							return;
						}
					} else {
						this.$message({
							type: 'error',
							message: '二级分销比例介于0-1之间,小数点后最多两位小数'
						});
						done();
						return;
					}
				}

				if (this.obj.distributionLevel == 3) {
					if (rep.test(this.obj.oneRatio)) {
						if (this.obj.oneRatio > 0 && this.obj.oneRatio < 1) {
							let tempDataOne = this.obj.oneRatio + '';
							if (tempDataOne.length > 4) {
								this.$message({
									type: 'error',
									message: '一级分销比例介于0-1之间,小数点后最多两位小数'
								});
								done();
								return;
							}
						} else {
							this.$message({
								type: 'error',
								message: '一级分销比例介于0-1之间,小数点后最多两位小数'
							});
							done();
							return;
						}
					} else {
						this.$message({
							type: 'error',
							message: '一级分销比例介于0-1之间,小数点后最多两位小数'
						});
						done();
						return;
					}

					if (rep.test(this.obj.twoRatio)) {
						if (this.obj.twoRatio > 0 && this.obj.twoRatio < 1) {
							let tempDataTwo = this.obj.twoRatio + '';
							if (tempDataTwo.length > 4) {
								this.$message({
									type: 'error',
									message: '二级分销比例介于0-1之间,小数点后最多两位小数'
								});
								done();
								return;
							}
						} else {
							this.$message({
								type: 'error',
								message: '二级分销比例介于0-1之间,小数点后最多两位小数'
							});
							done();
							return;
						}
					} else {
						this.$message({
							type: 'error',
							message: '二级分销比例介于0-1之间,小数点后最多两位小数'
						});
						done();
						return;
					}

					if (rep.test(this.obj.threeRatio)) {
						if (this.obj.threeRatio > 0 && this.obj.threeRatio < 1) {
							let tempDataThree = this.obj.threeRatio + '';
							if (tempDataThree.length > 4) {
								this.$message({
									type: 'error',
									message: '三级分销比例介于0-1之间,小数点后最多两位小数'
								});
								done();
								return;
							}
						} else {
							this.$message({
								type: 'error',
								message: '三级分销比例介于0-1之间,小数点后最多两位小数'
							});
							done();
							return;
						}
					} else {
						this.$message({
							type: 'error',
							message: '三级分销比例介于0-1之间,小数点后最多两位小数'
						});
						done();
						return;
					}
				}
			}
			else if (this.obj.settingType == 2) {
				if (rep.test(this.obj.shareRatio)) {
					if (this.obj.shareRatio > 0 && this.obj.shareRatio < 1) {
						let tempDataShare = this.obj.shareRatio + '';
						if (tempDataShare.length > 4) {
							this.$message({
								type: 'error',
								message: '商品分享返利比例介于0-1之间,小数点后最多两位小数'
							});
							done();
							return;
						}
					} else {
						this.$message({
							type: 'error',
							message: '商品分享返利比例介于0-1之间,小数点后最多两位小数'
						});
						done();
						return;
					}
				} else {
					this.$message({
						type: 'error',
						message: '商品分享返利比例介于0-1之间,小数点后最多两位小数'
					});
					done();
					return;
				}
			}*/
			this.obj.id = this.tempDataObj.id;
			this.obj.addTime = this.tempDataObj.addTime;
			this.obj.deleteStatus = this.tempDataObj.deleteStatus;
			this.obj.storeId = this.tempDataObj.storeId;
			this.obj.userId = this.tempDataObj.userId;
			console.log(this.obj);
			commitEdit(this.obj).then(res => {
				if (res.data.code == 200) {
					this.loading = false;
					this.$message({
						message: '操作成功',
						type: 'success'
					});
					done();
				} else {
					done();
					this.loading = false;
					this.$message({
						message: res.data.message,
						type: 'error'
					});
					return;
				}
			});
		},
		/*handleClick(tab) {
			//tab页切换
			if (tab.name == 'first') {
				this.settingType = 1;
				this.whichSetting = '是否开启分销';
				this.transferMethod();
				this.option.column[2].display = true;
				if (this.obj.distributionLevel == 1) {
					this.option.column[3].display = true;
					this.option.column[4].display = false;
					this.option.column[5].display = false;
				} else if (this.obj.distributionLevel == 2) {
					this.option.column[3].display = true;
					this.option.column[4].display = true;
					this.option.column[5].display = false;
				} else if (this.obj.distributionLevel == 3) {
					this.option.column[3].display = true;
					this.option.column[4].display = true;
					this.option.column[5].display = true;
				}
				this.option.column[6].display = false;
			} else if (tab.name == 'second') {
				this.whichSetting = '是否开启返利';
				this.settingType = 2;
				this.transferMethod();
				//隐藏掉分销模式，以及分销比例
				this.option.column[2].display = false;
				this.option.column[3].display = false;
				this.option.column[4].display = false;
				this.option.column[5].display = false;
				this.option.column[6].display = true;
			}else if (tab.name == 'third'){
				this.whichSetting = '是否启用';
				this.settingType = 3;
				console.log(this.settingType);
				this.transferMethod();
				//隐藏掉分销模式，以及分销比例
				this.option.column[2].display = false;
				this.option.column[3].display = false;
				this.option.column[4].display = false;
				this.option.column[5].display = false;
				this.option.column[6].display = false;
			}
		},*/

		transferMethod() {
			getDetail(this.settingType).then(res => {
				this.obj = res.data.data;
				this.tempDataObj = res.data.data;
				console.log(this.tempDataObj);
				console.log(this.obj);
			});
		},

		getAllGoods() {
			this.onGoodsLoad(this.goodsPage);
			this.drawerAllGoods = true;
			this.getRelationGoods();
		},

		//选择商品的回调
		selectionChange(list) {
			this.idList = [];
			list.forEach((item, index) => {
				this.idList[index] = item.id;
			});
			console.log(this.idList);
		},
		refreshGoodsChange() {
			this.idList = [];
			this.currentGoodsChange(1);
			this.$refs.goodsCrud.toggleSelection();
			this.onGoodsLoad(this.goodsPage);
		},

		searchGoodsChange(params) {
			this.idList = [];
			this.$refs.goodsCrud.toggleSelection();
			this.currentGoodsChange(1);
			params.goodsStatus = 0;
			this.goodsQuery = params;
			this.onGoodsLoad(this.goodsPage, params);
		},

		//商品表格方法
		searchGoodsReset() {
			this.idList = [];
			this.$refs.goodsCrud.toggleSelection();
			this.goodsQuery = {};
			this.onGoodsLoad(this.goodsPage);
		},

		currentGoodsChange(currentPage) {
			this.goodsPage.currentPage = currentPage;
			this.onGoodsLoad(this.goodsPage);
		},

		sizeGoodsChange(pageSize) {
			this.goodsPage.pageSize = pageSize;
			this.onGoodsLoad(this.goodsPage);
		},

		onGoodsLoad(goodsPage, params = {}) {
			params.goodsStatus = 0;
			let _settingType = this.settingType;
			params.settingType = _settingType;
			getJoinDistributionList(goodsPage.currentPage, goodsPage.pageSize, Object.assign(params, this.goodsQuery)).then(res => {
				this.goodsloading = false;
				const data = res.data;
				this.goodsPage.total = data.count;
				this.goodsList = data.data;
			});
		},

		//选择完商品后点击确定
		handleSubmit() {
			//先查询已跟分销关联的商品集合，选中的数据中，如果有则提示该商品已经提示该商品已跟分销关联
			if (this.specifyGoods.length > 0) {
				if (this.idList.length > 0) {
					for (let x = 0; x < this.idList.length; x++) {
						let idListId = this.idList[x];
						for (let y = 0; y < this.specifyGoods.length; y++) {
							let specifyGoodId = this.specifyGoods[y].goodsId;
							if (idListId == specifyGoodId) {
								let errorMsg = this.specifyGoods[y].goodsName + '已关联';
								this.idList = [];
								this.$message.error(errorMsg);
								return;
							}
						}
					}
				} else {
					this.$message.error('请选择需要指定的商品');
					return false;
				}
			}
			this.drawerAllGoods = false;
			console.log(this.idList);
		},

		getRelationGoods() {
			getAllList(this.settingType).then(res => {
				if (res.data.code == 200) {
					this.specifyGoods = res.data.data;
					console.log(this.specifyGoods);
				} else {
					this.$message({
						message: res.data.message,
						type: 'error'
					});
				}
			});
		},

		//关闭抽屉
		handleEmpty() {
			this.drawerAllGoods = false;
		}
	}
};
</script>

<style></style>
